import config from '@/store/config'
import { defineStore } from 'pinia'
import { getStorageSync, getUserInfo, setStorageSync } from '@/store/storage'
import { store } from '@/store/pinia'
import { createTheme, updateTheme } from '@/plugins/api/theme'

const themeState = {
    defaultTheme: config.themeDefault,
    storeColor: config.themeDefault,
    barData: config.barData
}

export const themeStore = defineStore('theme', {
    state: () => themeState,
    actions: {
        setStoreColor(data: object) {
            this.$state.storeColor = data;
            setStorageSync('theme', data)
            // if (getUserInfo().theme) {
            //     updateTheme(data).then();
            // } else {
            //     createTheme(data).then();
            // }
        },
        getStoreColor() {
            const theme = getStorageSync('theme');
            // const user = getUserInfo();
            // if (user) {
            //     this.$state.storeColor = user.theme;
            //     setStorageSync('theme', user.theme);
            // } else if (theme) {
            // this.$state.storeColor = theme;
            // }
            if (theme) this.$state.storeColor = theme;
        },
        setBarData(data: object) {
            this.$state.barData = data;
        }
    },
    getters: {
        gettersStoreColor: (state) => state.storeColor,
        gettersDefault: (state) => state.defaultTheme,
        gettersBarData: (state) => state.barData,
    }
})

export const useTheme = () => themeStore(store);